<script type="text/x-template" id="push-notification">
    <div v-bind:class="[componentId]">
        <cly-header>
            <template v-slot:header-left>
                <h2> {{i18n('push-notification.title')}} </h2>
                <cly-tooltip-icon :tooltip="i18n('push-notification.description')" icon="ion ion-help-circled" class="bu-ml-2"> </cly-tooltip-icon>
            </template>
            <template v-slot:header-right v-if="canUserCreate">
                <div class="bu-level-item">
                    <el-button @click="onCreatePushNotification" type="success" size="small" icon="el-icon-circle-plus">{{i18n('push-notification.create-button')}}</el-button>
                </div>
            </template>
            <template v-slot:header-tabs>
                <cly-dynamic-tabs class="push-notification__main-tabs" v-model="selectedPushNotificationTab" skin="secondary" :tabs="pushNotificationTabs">
                    <template v-slot:tables="scope">
                        <span>{{scope.tab.title}}</span>
                    </template>
                </cly-dynamic-tabs>
            </template>
        </cly-header>
        <push-notification-drawer ref="pushNotificationDrawer" @onClose="onDrawerClose" @save="onSave" :controls="drawers.pushNotificationDrawer" :type="selectedPushNotificationTab" :userCommand="userCommand.type" :id="userCommand.pushNotificationId" :isOpened="isDrawerOpen"></push-notification-drawer>
    </div>
</script>